<template>
     <div id="detail">
         <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav"/>
         <scroll class="content" 
         ref="scroll" 
         :probe-type="3"
         @scroll="contentScroll">
         <detail-swiper :top-images="topImages"/>
         <detail-base-info :goods="goods"/>
         <detail-shop-info :shop="shop"/>
         <detail-goods-info :detailInfo="detailInfo"/>
         <detail-param-info ref="params" :param-info="paramInfo"/>
         <detail-comment-info ref="comment" :comment-info="commentInfo"/>
         <goods-list ref="recommend" :goods="recommend"/>
         </scroll>
         <detail-bottom-bar @addCart="addToCart"/>
         <back-top @click.native="backClick" v-show="isShowBackTop"/>
         <toast  :message="message" :show="show"/>
     </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import DetailBottomBar from './childComps/DetailBottomBar'
import BackTop from '../../components/content/backTop/BackTop'

import Toast from '../../components/common/toast/Toast'
import Scroll from '../../components/common/scroll/Scroll'

import {getDetail,Goods,getRecommend,Shop,GoodsParam} from '../../network/detail'
import {debounce} from '../../common/utils'
import {itemListenrMixin,backTopMixin} from '../../common/mixin'
import GoodsList from '../../components/content/goods/GoodsList'
export default {
  name:"Detail",
  components:{
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    GoodsList,
    DetailBottomBar,
    BackTop,
    Toast,
    Scroll
  },
  mixins:[itemListenrMixin,backTopMixin ],
  data(){
      return{
          iid: null,
          topImages: [],
          goods: {},
          shop: {},
          detailInfo: {},
          paramInfo: {},
          commentInfo: {},
          recommend: [],
          themeTopYs:[],
          getThemTopY: null,
          currentIndex: 0,
          message:'',
          show: false
      }
  },
  methods: {
      titleClick(index) {
          this.$refs.scroll.scroll.scrollTo(0, -this.themeTopYs[index], 100)
          this.getThemTopY()
      },
      contentScroll(position){
          //获取Y值
          const positionY = -position.y
          //positiony与主题中的值进行对比
          let length = this.themeTopYs.length
          for(let i=0;i<length-1;i++){
              if(( positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i+1]))
              {
                  this.currentIndex = i;
                  this.$refs.nav.currentIndex = this.currentIndex
              }
          }
          //是否显示回到顶部
          this.isShowBackTop = (-position.y) > 1000
      },
      addToCart(){
          //获取购物车需要展示的信息
          const product = {};
          product.image = this.topImages[0];
          product.title = this.goods.title;
          product.desc = this.goods.desc;
          product.price = this.goods.realPrice;
          product.iid = this.iid
          //将商品加入购物车
          /* this.$store.dispatch('addCart',product) */
          //添加购物车成功
          this.$store.dispatch('addCart', product).then(res =>{
              this.show = true;
              this.message = res;
              setTimeout(()=>{
                this.show = false;
                this.message = '';
              },1500)
          })
      }
  },
  created() {
      //保存传入的iid
      this.iid = this.$route.params.iid
      //根据iid请求数据

      getDetail(this.iid).then(res =>{
          //console.log(res)
          const data = res.result;
          this.topImages = data.itemInfo.topImages;

          //获取商品信息
          this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)

          //创建店铺信息
          this.shop = new Shop(data.shopInfo)

          //保存商品的详情数据
          this.detailInfo = data.detailInfo;

          //获取参数信息
          this.paramInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule)

          //取出评论信息
          if(data.rate.cRate !==0){
              this.commentInfo = data.rate.list[0]
          }
      })
           //请求推荐数据
           getRecommend().then(res =>{
               this.recommend = res.data.list
           })
           //给getThemTopY赋值
           this.getThemTopY  = debounce(()=>{
              this.themeTopYs = [];
              this.themeTopYs.push(0);
              this.themeTopYs.push(this.$refs.params.$el.offsetTop);
              this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
              this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
              this.themeTopYs.push(Number.MAX_VALUE);
           },100)
  },
  mounted() {
  },
  updated() {
  },
  destroyed(){
      this.$bus.$off('itemImgload',this.itemImgListener)
  }
}
</script>

<style scoped>
 #detail{
    height: 100vh;
    position: relative;
    z-index: 9;
    background-color: #fff;
}

.detail-nav{
    position: relative;
    background-color:#fff;
}
.content {
    height: calc(100% - 44px);
    overflow: hidden;
} 
</style>